<template>
  <div>
    <banner />
    <div class="container">
      <div class="row">
        <div class="col-md-2 col-sm-12" style="">
          <div class="pl-4 pt-2 pb-2 aboutselect">新闻资讯</div>
          <ul style="margin-top: 10px; background-color: #dcdddd">
            <li class="pl-4 pt-2 pb-2" :class="{ aboutselect: id == 1 }">
              <a
                style="color: aliceblue"
                :href="`/custom/2?id=1&page=1&pagsize=10`"
              >
                <div>丰烁资讯</div>
              </a>
            </li>
            <li class="pl-4 pt-2 pb-2" :class="{ aboutselect: id == 2 }">
              <a
                style="color: aliceblue"
                :href="`/custom/2?id=2&page=1&pagsize=10`"
              >
                <div>媒体聚焦</div>
              </a>
            </li>
          </ul>
        </div>
        <div class="col-md-10">
          <div v-if="asyncData[0].item.length != 0" class="content1 pt-5">
            <h1>{{ asyncData[0].item[0]?.title }}</h1>
            <p>
              <span class="mr-10 mt-sm-3">
                {{ asyncData[0].item[0]?.CreateDate | formatDate }}
              </span>
              <span>
                {{ asyncData[0].item[0]?.author + '  ' }}
              </span>
            </p>

            <hr />
            <!-- <h1>媒体2</h1> -->
            <div v-html="asyncData[0].item[0].content"></div>
          </div>
          <div v-else class="content1 pt-5">
            <h1>{{ asyncData[1].item[0]?.title }}</h1>
            <p>
              <span class="mr-10 mt-sm-3">
                {{ asyncData[1].item[0]?.CreateDate | formatDate }}
              </span>
              <span>
                {{ asyncData[1].item[0]?.author + '  ' }}
              </span>
            </p>

            <hr />

            <!-- <h1>媒体1</h1> -->
            <div v-html="asyncData[1].item[0].content"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'blog',
  data() {
    return {
      content: [],
      change: null,
    }
  },
  async asyncData({
    isDev,
    route,
    store,
    env,
    params,
    query,
    req,
    res,
    redirect,
    error,
    $axios,
  }) {
    const model1 = route.params.id
    const detailid = route.params.detail
    // 获取所有数据

    const { data } = await $axios.post('/api/detailid', {
      id: model1,
      detailid,
    })
    console.log(data)
    return {
      asyncData: data.data,
    }
  },
  created() {},
  computed: {
    id: {
      get() {
        return this.$route.query.id
      },
    },
  },
  methods: {},
}
</script>

<style scoped>
.aboutselect {
  background-color: #66bd29;
  color: #fff;
}
ul .aboutleft div {
  height: 40px;
  border-bottom: 1px solid #fff;
}
.content2 {
  overflow: hidden;
  text-align: center;
}
::v-deep .content1 img {
  max-width: 100% !important;
}
::v-deep .content1 p img {
  max-width: 100% !important;
}
</style>
